﻿@{
    ViewBag.Title = "JQGrid";
}
<h2>
    JQGrid</h2>
<link href="@Url.Content("~/Content/ui.jqgrid.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/smoothness/jquery-ui-1.8.17.custom.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/i18n/grid.locale-en.js")"type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.jqGrid.src.js")"type="text/javascript"></script>
<table id="list1">
</table>
<div id="pager1">
</div>
<script>
    $(function () {
        $("#list1").jqGrid(
        {
            url: 'JQGridData',
            datatype: "json",
            colNames: 
            [
                'ItemId',
                'ProductId',
                'ListPrice',
                'UnitCost'
            ],
            colModel: 
            [
                { name: 'ItemId', index: 'ItemId', width: 55 },
                { name: 'ProductId', index: 'ProductId', width: 90 },
                { name: 'ListPrice', index: 'ListPrice', width: 90 },
                { name: 'UnitCost', index: 'UnitCost', width: 90 }
            ],
            rowNum: 20,
            rowList: [10, 20, 30],
            pager: '#pager1',
            sortname: 'ItemId',
            viewrecords: true,
            sortorder: "desc",
            width: 800,
            height: 360,
            caption: "JSON Example",
            shrinkToFit: false
        });

        $("#list1").jqGrid('navGrid', '#pager1', { edit: false, add: false, del: false });
    });
</script>
